// -----------------获取全部5次成绩------------
axios.get('/score/list').then(({data:res})=>{
    let {code,data}=res;
    if(code===0){
        // console.log(data);
        let str='';
        for(let key in data){
            //key就是对象的键 ,表示学员id
            //data[key]就是对象的值
            str += `
            <tr>
              <th scope="row">${key}</th>
              <td>${data[key].name}</td>
              <td class="score" data-id="${key}" data-batch="1">${data[key].score[0]}</td>
              <td class="score" data-id="${key}" data-batch="2">${data[key].score[1]}</td>
              <td class="score" data-id="${key}" data-batch="3">${data[key].score[2]}</td>
              <td class="score" data-id="${key}" data-batch="4">${data[key].score[3]}</td>
              <td class="score" data-id="${key}" data-batch="5">${data[key].score[4]}</td>
            </tr>
            `;
          }
          // 循环结束，得到很多tr。把tr放到tbody中
          $('tbody').html(str);
    }
})


// ----------------点击单元格,能够编辑数据-----------------
//思路:点击td的时候,创建input 把input放到td中
$('tbody').on('click','.score',function(){

    let td=$(this);
    //判断td中的子元素个数,如果大于0,则表示有一个input了,否则return
    if(td.children().length>0) return;
    // 获取td中的 分数
    let text=td.text();
    // 清空td
    td.html('');
    //创建input,并放到td中
    let input=$('<input />');
    // 美化input
  input.css({
    border: 'none',
    outline: 'none',
    background: td.css('background'),
    textAlign: 'center'
  });
  input.val(text);
  td.append(input)
  input.trigger('focus'); // 让input获取焦点

  // -------------------------- 注册 blur 事件 ----------------------
  input.on('blur', function () {
    // 失去焦点，表示取消修改或录入
    // 把原来的值，放回到 td 中
    td.text(text);
  })


//   ---------------------------注册 keyup 事件------------------------
input.on('keyup',function(e){
    if(e.key==='Enter'){
        //按回车键表示确认修改
        //想接口发送请求,  提交数据,完成修改
        let data={
            stu_id:td.data('id'),//学员id
            batch:td.data('batch'),//次数
            score:$(this).val(),//分数
        };
        // console.log(data);
    axios.post('/score/entry', data).then(({ data: res }) => {
        if (res.code === 0) {
          toastr.success(res.message); // 提示
          td.text(data.score); // 设置新的分数
        }
      });
    }
  })
})